import React, { useState } from 'react';
import { Table, Image, Avatar, Space, Button } from 'antd';
import { useEffect } from 'react';
import { getUserlist } from './../../api/user';
import TelShow from './../../components/TelShow';
import TimeShow from './../../components/TimeShow';

function UserList() {
  const [userlist, setUserlist] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const res = await getUserlist();
      setUserlist(res.data.data);
    }
    fetchData();
  }, []);

  const columns = [
    { title: '序号', render: (text, record, index) => <span>{index + 1}</span> },
    {
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',
      render: (text, record, index) => {
        return <Avatar src={<Image src={text} width={60} height={60} />} />;
      }
    },
    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',
      width: '200px',
      render: (text) => {
        return <TelShow tel={text} />;
      }
    },
    { title: '用户名', dataIndex: 'username', key: 'username' },
    { title: '昵称', dataIndex: 'nickname', key: 'nickname' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text, record, index) => {
        return text === 1 ? '男' : text === 0 ? '女' : '暂未设置';
      }
    },
    { title: '生日', dataIndex: 'birthday', key: 'birthday' },
    { title: '注册时间', dataIndex: 'regtime', key: 'regtime', render: (text) => <TimeShow time={text} /> },
    {
      title: '操作',
      render: (text, record, index) => {
        return (
          <Space>
            <Button>冻结</Button>
          </Space>
        );
      }
    }
  ];
  return <Table dataSource={userlist} columns={columns} rowKey='userid' />;
}

export default UserList;
